<script setup>
	// 引入echarts的所有组件
	import Total from "@/components/chart/Total.vue";
	import TypeCount from "@/components/chart/TypeCount.vue";
	import UserCount from "@/components/chart/UserCount.vue";

</script>

<template>
	<div class="container">
		<el-row >
			<el-col :span="8">
				<el-row>
					<el-col :span="24">
						<div style="width: 100%; height: 500px">
							<TypeCount></TypeCount>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="width: 100%; height: 250px">
							<TypeCount></TypeCount>
						</div>
					</el-col>
				</el-row>
			</el-col>
			
			<el-col :span="16">
				<el-row>
					<el-col :span="24">
						<div style="width: 100%; height: 250px">
							<Total></Total>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="width: 100%; height: 500px">
							<UserCount></UserCount>
						</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<style scoped>
	.container{
		/* background-image: radial-gradient(50% 50% at 50% 70%, #545C64, #1A232A); */
		/* border: 1px solid #01093D; */
		min-height: 100%;
		background-color: #F5F5F5;
		
	}
	.container>.el-row{
		/* background-color: #FFF; */
		padding: 15px;
	}
	.title{
		text-align: center;
		color: #1A232A;
		/* font-weight: bold; */
		font-size: 36px;
		/* background-color: #091440; */
	}
	.el-col .el-col{
		background-color: #FFF;
		/* border: 1px solid #58A6FE; */
		border-radius: 5px;
	}
	.el-row .el-row {
		margin-bottom: 15px;
		margin-right: 15px;
	}

</style>